<script lang="ts" setup>
import { jurisdictionApi } from '@/business'
import type { JurisdictionData, LoginData } from '@/interfaces/RequestType'
import router from '@/router'
import { useUserStore } from '@/stores/userStore'
import { ArrowDown } from '@element-plus/icons-vue'
import { computed } from 'vue'

// #region 引入包, 函数和组件

// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const store = useUserStore()
// #endregion

// #region // 变量

// #endregion

// #region // 函数
// 下拉项触发点击项
const onCommand = (e: string) => {
  // console.log(e)
  if (e === 'logout') {
    // 清空user
    store.setUser(null)
    store.currentRouteMenu = ''
    router.replace('/login')
  }
}
// 筛选权限
const filterJurisdction = (data: JurisdictionData[], bol: boolean) => {
  data = data.filter((item) => {
    // console.log(store.user!.routers, item.route)
    if (!store.user!.routers.includes(item.route) && item.route !== '') {
      return false
    } else {
      if (item.children) {
        item.children = filterJurisdction(item.children, false)
      }
      return true
    }
  })
  if (bol) {
    // console.log(data)
    data = data.filter((i) => i.children!.length)
    // console.log(data)
  }
  return data
}
// 获取权限
const getJurisdiction = async (userInfo: LoginData | null) => {
  // console.log(111)
  try {
    // 如果数据没有返回
    if (!userInfo || !store.user) return
    const res = await jurisdictionApi(userInfo)
    // console.log(res.data)
    if (res.data.code === 0) {
      let data: JurisdictionData[] = res.data.data
      // 处理路由
      data = filterJurisdction(data, true)

      store.setJurisdiction(data)
      if (store.jurisdiction && store.jurisdiction[0].children && !store.currentRouteMenu) {
        // 获取权限后设置初始路由并跳转过去
        store.setCurrentRouteMenu(store.jurisdiction[0].children[0].route)
      }
      if (store.currentRouteMenu) router.replace(store.currentRouteMenu)
    }
  } catch (error) {
    console.log(error)
  }
}
// 选择菜单
const selectMenu = (e: string) => {
  // console.log(e)
  store.setCurrentRouteMenu(e)
}

// #endregion

// #region // 生命周期和vue函数
const activeOpenIndexs = computed(() => {
  if (!store.jurisdiction) return []
  // console.log(store.jurisdiction.map((item, index) => String(index)))
  return store.jurisdiction.map((item, index) => String(index))
})
// 获取权限
getJurisdiction(store.user)
// #endregion
</script>

<template>
  <div class="home">
    <el-container class="layout-container" style="height: 100%">
      <!-- 侧边栏 -->
      <el-aside width="200px">
        <h3 class="title">标题</h3>
        <el-scrollbar>
          <el-menu
            :default-openeds="activeOpenIndexs"
            :default-active="store.currentRouteMenu"
            router
            @select="selectMenu"
          >
            <el-sub-menu
              v-for="(item, index) in store.jurisdiction"
              :key="index"
              :index="String(index)"
            >
              <template #title>
                <el-icon> <component :is="item.icon"></component> </el-icon>{{ item.name }}
              </template>
              <el-menu-item v-for="v in item.children" :index="v.route" :key="v.route">{{
                v.name
              }}</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <div class="toolbar">
            <el-dropdown trigger="click" @command="onCommand">
              <div class="user_info">
                <el-avatar shape="circle" :src="store.user?.avatar"></el-avatar>
                <span>{{ store.user?.uname }}</span>
                <el-icon>
                  <ArrowDown />
                </el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="sass" scoped>
@mixin nowrap
  white-space: nowrap
  text-overflow: ellipsis
  overflow: hidden
.home
  width: 100%
  height: 100%
  background: #f4f4f4

.layout-container
  .el-header
    position: relative
    background-color: #fff
    color: var(--el-text-color-primary)

  .el-aside
    color: var(--el-text-color-primary)
    background: var(--el-color-primary-light-8)
    .title
      height: 60px
      background: #fff
      line-height: 60px
      text-align: center
      font-weight: 600
    .el-scrollbar
      background: #fff
      width: 100%
      height: calc(100% - 60px)

  .el-menu
    border-right: none
    .el-menu-item
      background: #f9f9f9

  .el-main
    padding: 0
    div
      width: 100%
      height: 100%

  .toolbar
    display: inline-flex
    align-items: center
    justify-content: center
    height: 100%
    right: 20px
    font-size: 16px
    .user_info
      cursor: pointer
      display: flex
      align-items: center
      line-height: 21px
      .el-avatar
        margin-right: 10px
        border: 1px solid #ccc
</style>
